
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据监测的总结</title>
    <script src="../commonjs/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1>姓名:{{student.name}}</h1>
        <h3>年龄:{{student.age}}</h3>
        <h3 v-show="student.sex">性别:{{student.sex}}</h3>
        <h3>爱好:</h3>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        <h3>朋友们:</h3>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}--{{f.age}}
            </li>
        </ul>
        <button @click="student.age++">年龄加1岁</button>
        <button @click="addSex">属性加性别 默认值为男</button>
        <button @click="student.sex = '未知' ">修改性别</button>
        <button @click="addFriend">列表首位添加一个朋友</button>
        <button @click="updateFirstFriendName">更新首位朋友的姓名</button>
        <button @click="addHobby">添加一个爱好</button>
        <button @click="updateFirstHooby">修改第一个爱好为开车</button>
        <button @click="filterSmoke">过滤爱好的抽烟</button>
    </div>
    <script>
        Vue.config.productionTip = false;//关闭开发提示
        const vm = new Vue({
            el:'#root',
            data:{
                student:{
                    name:'Tom',
                    age:18,
                    hobby:['喝酒','抽烟','烫头'],
                    friends:[
                        {name:'Jerry',age:35},
                        {name:'Jack',age:40}
                    ]
                }
            },
            methods:{
                addSex(){
                    /*Vue.set(this.student,'sex','男')*/  //奏效
                    this.$set(this.student,'sex','男')  //奏效
                },
                addFriend(){
                    this.student.friends.unshift({name:'Marry',age:25})
                },
                updateFirstFriendName(){
                    this.student.friends[0].name='张三'
                },
                addHobby(){
                    this.student.hobby.push('学习')
                },
                updateFirstHooby(){
                    this.student.hobby.splice(0,1,'开车')
                },
                filterSmoke(){
                    const newHobby = this.student.hobby.filter((h)=>{
                        return h != '抽烟'
                    })
                    this.student.hobby = newHobby
                }
            }
        })
    </script>
</body>
</html>